<script setup lang="ts">
import { getShopList } from '@/api/shop'
import { useUserStore } from '@/stores'
import { formatShopData } from './indexUtil'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const ShopList = ref([])
const indexList = ref([])
const total = ref(0)
getShopList(userInfo.value.id)
  .then((res) => {
    ShopList.value = formatShopData(res.data.data)
    total.value = res.data.total
    indexList.value = ShopList.value.map(item => item.index)
  })
  .catch((err) => {
    console.error(err)
  })
</script>

<template>
  <div>
    <van-index-bar :sticky-offset-top="46" :index-list="indexList">
      <van-cell style="padding: 5px;" :title="$t('customer.addCustomer')" @click="$router.push({ name: 'customer-add' })">
        <template #title>
          <div class="flex items-center justify-left">
            <van-icon name="add-square" font-size="28px" mr-5 color="var(--van-success-color)" />
            <span class="custom-title">添加客户</span>
          </div>
        </template>
      </van-cell>
      <div v-for="group in ShopList" :key="group.index">
        <van-index-anchor :index="group.index" />
        <van-cell v-for="shop in group.list" :key="shop.id" :title="shop.name" @click="$router.push({ name: 'customer-detial', query: { id: shop.id } })" />
      </div>
    </van-index-bar>
  </div>
</template>

<route lang="json5">
{
  name: 'customer',
  meta: {
    title: '客户管理',
    i18n: 'menus.customer'
  },
}
</route>
